<template>
    <div class="user-list">
        <el-card shadow="hover">
            <div slot="header" class="flex jusc">
                <div class="head-title">
                    <span>通知管理</span>
                    <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length
                    }}个</span>
                </div>
                <div class="flex">
                    <div class="head-input">
                        <el-input v-model="searchContent" prefix-icon="el-icon-search" placeholder="根据通知或标题搜索"
                            @blur="search" @keyup.enter.native="search"></el-input>
                    </div>
                    <div class="head-btn">
                        <el-button type="danger" @click="deleteUser(-1)" size="medium">批量删除</el-button>
                        <!-- <el-button type="success" @click="restoreUser(-1)" size="medium">批量恢复</el-button> -->
                    </div>
                </div>

            </div>
            <div>
                <el-table class="fff" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100% ;"
                    
                    v-loading="isLoading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="userId" label="反馈者id" width="100">
                    </el-table-column>
                    <el-table-column prop="content" label="内容" width="300">
                    </el-table-column>
                    <el-table-column prop="receiverType" label="反馈类型" width="120">
                        <template slot-scope="scope">{{ scope.row.type == 1 ? "功能问题" : scope.row.type == 2 ? "页面问题" : "其他问题" }}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="200">
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">{{ scope.row.status == 1 ? "正常" : scope.row.status == 2 ? "失效" : "已删除" }}</template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" >
                        <template slot-scope="scope">
                            <!-- <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button> -->
                            <el-button size="mini" v-show="scope.row.status == 1 || scope.row.status == 2" type="danger"
                                @click="deleteUser(scope.row.id)">删除</el-button>
                            <!-- <el-button size="mini" v-show="scope.row.status == 2" type="success"
                                @click="restoreUser(scope.row.id)">恢复</el-button> -->
                            
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pag">
                <el-pagination background layout="prev, pager, next" :current-page="currPage"
                    @current-change="handleCurrentChange" :page-size="pageSize" :total=total>
                </el-pagination>
            </div>
        </el-card>



    </div>
</template>

<script>

export default {
    name: 'user',
    data() {
        return {
            newUserInfoFormVisible: false,
            newUserForm: {},
            pageSize: 10,
            isLoading: false,
            currPage: 1,
            total: 1,
            tableData: [],
            multipleSelection: [],
            editDialogVisible: false,
            editUserItem: {},
            searchContent: "", // 搜索内容
        }
    },
    mounted() {
        // this.getUserList()
        this.search()
    },
    methods: {
        // async getUserList(){
        //     let res = await this.$store.dispatch("getUserList")
        //     if (res.success){

        //     }
        //     else this.$global.resError(res)
        // },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页为：${val}`)
            this.currPage = val
            this.search()
        },
        edit(item) {
            this.editUserItem = JSON.parse(JSON.stringify(item));   //深拷贝(浅拷贝用的引用会直接影响原来数据)
            this.editDialogVisible = true
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editUserItem = {}
            }, 300)
        },
        init() {
            // this.searchContent = ""
            this.search()
            // this.$message.success(res.message)
        },
        newUser() {
            this.newUserInfoFormVisible = true;
        },
        //保存

        //禁用账号
        async deleteUser(id) {
            let res
            if (id == -1) {
                if(this.multipleSelection.length < 1)return ;
                this.multipleSelection = this.multipleSelection.map(item => item.id)
                res = await this.$store.dispatch("updateFeedStatus", {
                    list: this.multipleSelection,
                    status: 3
                })
            } else {
                let list = []
                list.push(id)
                res = await this.$store.dispatch("updateFeedStatus", {
                    list: list,
                    status: 3
                })
            }
            if (res.success) {
                this.$message({
                    message: "操作成功",
                    type: "success",
                });
                this.init()
            } else {
                this.$global.resError(res)
            }
        },

        async search() {
            this.isLoading = true
            let res = await this.$store.dispatch("getFeed", {
                pageSize: this.pageSize,
                searchContent: this.searchContent,
                currPage: this.currPage,
            });
            this.isLoading = false
            if (res.success) {
                // console.log("data = " + res.data)
                this.tableData = res.data.list
                this.total = res.data.totalCount
                // console.log(this.tableData)
            }
            else this.$global.resError(res)
        }
    },
}
</script>

<style scoped>
.clearfix {
    display: flex;
    align-items: center;
}

.fff .el-table-column{
    display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; 
}
.head-btn {
    margin: 0 10px;
}

.user-list {
    background: rgb(248, 248, 248);
}

.pag {
    text-align: center;
    margin-top: 20px;
}

.head-title {
    font-size: 17px;
    font-weight: 550;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}

/* ::v-deep .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
} */
.flex {
    display: flex;
    align-items: center;
}

.jusc {
    justify-content: space-between;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}


.editUser .el-form-item {
    margin-bottom: 15px;
}

.editUser>>>.el-form-item__label,
.editUser>>>.el-form-item__content {
    /* font-size: 12px; */
}

.editUser>>>.el-form-item__label {
    margin-left: -10px;
}

.editUser .el-input {
    /* width: 300px; */
}
</style>